import React, { useState, useEffect } from 'react';
import {
    Button, DatePicker, Form, Input, Select, Space, TreeSelect
} from 'antd';
import { getDeptDataApi } from '../../../../apis/user'

export default function Search() {
    const [componentSize, setComponentSize] = useState('default');
    //存储部门数据
    const [deptData, setDeptData] = useState([]);
    const { RangePicker } = DatePicker;
    useEffect(() => {
        getDeptData();
    }, [])
    //获取部门数据
    async function getDeptData() {
        const deptDate = await getDeptDataApi();
         formatMenus(deptDate.rows.children);
        setDeptData(deptDate.rows.children);
        console.log("deptDate", deptDate);
    }
    //过滤数据
    function formatMenus(data) {
        return handleMenus(data)
        function handleMenus(data) {
            return data.map(item => {
                const o = {
                    ...item,
                    id:item.title,
                }
                return o;
            })
        }
    }

    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
    };
    const onReset = () => {
        console.log("重置");
        // form.resetFields();
    };
    return (
        <Form
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 8,
            }}
            labelWrap={false}
            layout="inline"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            initialValues={{
                size: componentSize,
            }}
            onValuesChange={onFormLayoutChange}
            size={componentSize}
        >
            <Form.Item label="用户名" name="username">
                <Input style={{ width: "300px" }} />
            </Form.Item>
            <Form.Item label="部门" name="department">
                <TreeSelect 
                vale="123"
                style={{ width: "300px" }}
                
                    treeData={deptData}
                />
            </Form.Item>
            <Form.Item label="创建时间" style={{ marginTop: "20px" }} name="createTime" >
                <Space direction="vertical" size={12}>
                    <RangePicker style={{ width: "300px" }} />
                </Space>
            </Form.Item>
            <Form.Item>
                <Button type="primary"
                    htmlType="submit"
                    style={{ marginLeft: "300px", marginTop: "10px" }}
                >查询</Button>
            </Form.Item>
            <Button htmlType="button" onClick={onReset} style={{ marginLeft: "20px", marginTop: "10px" }}>
                重置
            </Button>
        </Form>
    )
}
